<template>
	<div class="uiue-card" style="padding-bottom: 0; margin-top: 0">
		<div class="tit">{{ '新增应用申请' }}</div>

		<div class="content">
			<template v-if="type != '1'">
				<div>NO：--</div>
				<div>
					发起人：<span class="content-name">{{ userInfo.name }}</span>
				</div>
				<div>当前环节：{{ isEdit==='2' ? '修改' : '新建' }}应用环节</div>
			</template>
			<div>
				当前处理人：<span class="content-name">{{ userInfo.name }}</span>
			</div>
		</div>

		<a-tabs v-model:activeKey="activeKey" class="tabss" @change="handleChange">
			<a-tab-pane v-for="v in tabData" :key="v.key" :tab="v.txt"></a-tab-pane>
		</a-tabs>
	</div>
</template>

<script setup name="TopCard">
import tool from '@/utils/tool'
const emit = defineEmits(['tabChange'])
const userInfo = ref(tool.data.get('USER_INFO'))
import { useRoute } from "vue-router";
const route = useRoute()
const { isEdit } = route.query

// const editDate = inject('editDate')
// const version = inject('version')

// const isEdit = computed(() => {
// 	// true是修改  false修改
// 	return editDate.value ? true : false
// })

const config = [
	{ txt: '门户Html5', key: '1', type: 'pcPropertiesList' },
	{ txt: '移动端Html5', key: '2', type: 'appPropertiesList' },
	{ txt: 'Android', key: '3', type: 'androidPropertiesList' },
	{ txt: 'IOS', key: '4', type: 'iosPropertiesList' },
	{ txt: '移动端UMAP', key: '5', type: 'umapPropertiesList' }
]
// 应用类型
// const appinfoType = isEdit.value
// 	? editDate.value.appAccess.includes(',')
// 		? '双端'
// 		: config.find((v) => v.key == editDate.value.appAccess).txt
// 	: ''

// 标题 = 应用类型 + 应用名称 + 版本号 + 审批类型
// const title = isEdit.value ? ref(`${appinfoType}${editDate.value.appName}${version || ''}应用变更申请`) : ''

const tabData = isEdit === '1' ? [{ txt: '详细信息', key: '1' }] : [
	{ txt: '详细信息', key: '1' },
	{ txt: '流程历史', key: '2' },
	{ txt: '流程图', key: '3' }
]

const activeKey = ref('1')
const handleChange = (activeKey) => {
	emit('tabChange', activeKey)
}
</script>

<style lang="less" scoped>
.tit {
	color: rgb(40, 40, 40);
	font-family: PingFang SC;
	font-size: 20px;
	font-weight: 600;
	line-height: 28px;
	letter-spacing: 0px;
	text-align: left;
}

.content {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: flex-start;
	font-size: 14px;
	margin-top: 8px;
	color: rgb(89, 89, 89);

	div {
		margin-left: 16px;
	}

	&-name {
		color: rgb(50, 110, 255);
	}
}

.content :first-child {
	margin-left: 0;
}
</style>
<style>
.tabss .ant-tabs-nav {
	margin: 0;
}
</style>
